<template>
  <div class="user_details">
    <template v-if="this.$route.path == '/theUser/userDetails'">
      <el-card shadow="never">
        <div class="container download">
          <div class="row downloadsEa">
            <div class="col col-xxl-10 col-xl-9 col-lg-12 col-xl-6">
              <div class="details_">
                <img :src="echoData.img" class="details_img">
                <div class="details_list">
                  <h1>{{ echoData.nickname == null ? '未命名' : echoData.nickname }}</h1>
                  <div style="display: flex;">
                    <!-- <h3 v-show="activeName == '1' " style="font-weight: bold;width: 264px;">ID：{{ echoData.ad }}</h3> -->
                    <h3 style="font-weight: bold;width: 200px;">真实姓名：{{ echoData.zhename == null ? '未命名 ' : echoData.zhename }}</h3>
                  </div>
                  <!-- <h3 v-show="activeName == '2' "> </h3> -->
                  <div class="creation">
                    <div>
                      <p>用户名：{{ echoData.name }}</p>
                      <!-- <p>手机号：{{ echoData.phone }}</p> -->
                      <p>创建时间：{{ echoData.dateOf }} {{ echoData.createDate }}</p>
                    </div>
                    <div>
                      <p>手机号：{{ echoData.phone }}</p>
                      <!-- <p style="height: 24px;margin-bottom: 16px;"></p> -->
                      <p>最近登录：{{ echoData.dengDate }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col col-xxl-2 col-xl-3 col-lg-12 col-xl-6">
              <div class="btn_right">
                <el-button @click="operation('editor')">编辑</el-button>
                <el-button @click="operation('reset')">重置</el-button>
                <el-button @click="operation('limit')" v-if="echoData.status == 1 " class="limit">限制</el-button>
                <el-button @click="operation('iNlimit')" v-else-if="echoData.status == 2" class="iNlimit">解除</el-button>
                <!-- <el-button @click="goBack">返回</el-button> -->
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <div class="learn_details">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="学习进度" name="1">
            <the-users :ningData="ningData" @toView="toView"></the-users>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-size="pageSize"
              layout="prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="学习数据" name="2" class="second">
            <div class="seconds">
              <card-three :title="title" :time="time1" class="experiment"></card-three>
              <card-three :title="cumulative" :time="time2" class="average"></card-three>
              <card-three :title="continuous" :time="time3" class="teaching"></card-three>
              <card-three :title="degree" :time="time4" class="grant"></card-three>
            </div>
			      <div class="aroundOf">学习数据概括 <span>（每日学习时长统计）</span></div>
            <div class="canvanes">
              <line-chart :opinionData="info" :x="barX" style="height: 400px;"></line-chart>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>

    <transition name="transitionName">
			<router-view clss="index-main" />
    </transition>

  </div>
</template>

<script>
import theUsers from '../../components/thieUser/theUsers.vue';
import cardThree from '../../components/echarts/cardThree.vue';
import lineChart from '../../components/echarts/lineChart.vue';
import { minutesStudents, timestampToTimeShi } from '../../utils/util';
export default {
  components: { theUsers, cardThree, lineChart },
  data() {
    return {
      activeName: '1',
      ningData: [],  //学习进度数据
      title: '平均学习时间',
      time1: '0',
      cumulative: '累计学习时长',
      time2: '0',
      continuous: '连续登录天数',
      time3: '0',
      degree: '平均得分',
      time4: '0',
      barX: [],
      info: [{
        name: '每日学习时长(分)',
        type: 'line',
        stack: 'Total',
        data: []
      }],
      echoData: {},  // 详情跳转过来的信息
      currentPage3: 1,
      pageSize: 0,
      total: 0,
      isShowIn: false, // 控制限制和解除限制显示隐藏
    }
  },
	watch:{
		$route:{
      handler: function(val, oldVal){
        this.progressData();  //返回页面后自动刷新
      },
      // 深度观察监听
      deep:  true
		}
	},
  mounted() {
    var _this = this;
    // console.log(_this.$route.params)   // this.$route.params.add
    if( _this.$route.params.add === 'userAdd') {
      _this.echoData = _this.$route.params.row;
      _this.progressData();
    } else {
      _this.echoData = JSON.parse(sessionStorage.getItem('userData'));
      _this.progressData();
    }
  },
  methods: {
    // 学习进度数据
    progressData(currentPage){
      this.$http.theUser.learningProcess({page: currentPage,id: JSON.parse(sessionStorage.getItem('userData')).id,xieid: this.activeName}).then( res => {
				if(res.code == 200) {
					this.ningData = res.data;
					this.pageSize = res.size;
					this.total = res.total;
					this.studyDuration();
				}
      })
    },
    // 更改公共的累计学习时长分
    studyDuration(){
      this.ningData.filter( item => {
        item.shi = timestampToTimeShi(item.shi);
        item.pinshi = timestampToTimeShi(item.pinshi);
      })
    },
    // 编辑/重置/限制按钮
    operation(states) {
      if(states === 'editor'){  //编辑
        this.$router.push({ name: 'newUsers', params: this.echoData })
      } else if(states === 'reset') {  //重置
        this.$http.theUser.resetList({ id: JSON.parse(sessionStorage.getItem('userData')).id }).then( result => {
          this.$notify({
            title: '该用户密码已重置，恢复至默认',
            message: '初始密码为：000000',
            type: 'success'
          });
				})
      } else if(states == 'limit') {  //限制
        this.$http.theUser.limitList({ id: JSON.parse(sessionStorage.getItem('userData')).id }).then( result => {
          this.echoData.status = 2;
          this.$message({
            message: '恭喜你，限制成功',
            type: 'success'
          });
				})
      } else if(states == 'iNlimit'){  // 解除限制
        this.$http.theUser.theUpdateContent({id: JSON.parse(sessionStorage.getItem('userData')).id }).then( res => {
          this.echoData.status = 1;
          this.$message({
            message: '恭喜你，解除限制成功',
            type: 'success'
          });
        })
      }
    },
    // 学习进度和学习数据切换按钮
    handleClick(tab, event) {
      if(tab.index == 0) { this.progressData(); }
      else {
        this.$http.theUser.studentDataDetail({id: JSON.parse(sessionStorage.getItem('userData')).id, xueid: 2}).then( res => {
          if(res.code == 200) {
						this.time1 = res.data.pinshi == null ? '0' : timestampToTimeShi(res.data.pinshi);                 // 平均时长
						this.time2 = res.data.zhongshi == null ? '0' : timestampToTimeShi(res.data.zhongshi);             // 累计时长
						this.time3 = res.data.tian == null ? '0' : res.data.tian + '';    // 连续登录天数
						this.time4 = res.data.score == null ? '0' : res.data.score + '';  // 平均得分
					}
        })
        this.$http.theUser.studentData({id: JSON.parse(sessionStorage.getItem('userData')).id}).then( res => {
          if(res.code == 200) {
						this.barX = [];
						this.info[0].data = [];
						res.data.filter( cs => {
						  this.barX.push(cs.shoDate);
						  this.info[0].data.push(minutesStudents(cs.count));
						})
					}
        }) 
      }
    },
    // 组件传过来的  查看 事件
    toView(index,row){
      sessionStorage.setItem('toViewRow' , JSON.stringify(row));
      this.$router.push({ path: '/theUser/userDetails/learnDetails' });
    },
    // 分页操作
    handleSizeChange(val) { this.currentPage3 = val; },
    handleCurrentChange(val) {
      this.currentPage3 = val;
      this.progressData(val);
    },
    // 返回 goBack() { this.$router.push( { path: '/theUser'} ),sessionStorage.removeItem('userData'); }
  }
}
</script>

<style scoped>
@import '../../assets/css/theUser/userDetails.scss';
</style>
